// 详情页

// 获取当前要渲染的商品id
var id = getQueryString(location.href,'id');
// console.log( id );// '3'  '12'

// 获取当前页面要渲染的数据
var datas = null;
for (var i = 0; i < detail.length; i++) {
    if (id === detail[i].id) {
        datas = detail[i];
        break;
    }
}
// console.log( datas );

// 渲染路径导航
$('.navs').innerHTML = `<a href="./index.html">商城首页</a> / 
                        <a href="./list.html?class=${datas.class}">${datas.titleparent[0]}</a> / 
                        <span>${datas.titleparent[1]}</span>`;

// 渲染商品详情
$('.goods_msg .top h1').innerText = datas.title;
$('.goods_msg .top h3').innerText = '￥ ' + datas.price;
var tmp1 = '';
datas.description.forEach(function (item){
    tmp1 += `<li>● ${item}</li>`;
})
$('.goods_msg .center').innerHTML = tmp1;

// 渲染放大镜数据
$('.big_img img').src = datas.imggood[0];
$('.right img').src = datas.imggood[0];

var tmp2 = '';
datas.imggood.forEach(function (item){
    tmp2 += `<img src="${item}" alt="">`;
})
$('.small_img').innerHTML = tmp2;
$('.small_img').firstElementChild.className = 'active';

// 渲染产品概览
var tmp3 = '';
datas.imgds.forEach(function (item){
    tmp3 += `<img src="${item}" alt="">`
})
$('.detail_imgs').innerHTML = tmp3;

// 图片切换
var small_imgs = $('.small_img img');
var big_img = $('.big_img img');
var index = 0;// 当前显示图片的索引

for (var i = 0; i < small_imgs.length; i++) {
    small_imgs[i].index = i;
    small_imgs[i].onclick = function (){
        // 去掉当前显示图片的选中状态
        small_imgs[index].className = '';

        // 更新当前显示图片的索引
        index = this.index;

        // 当前选中项添加选中状态
        // small_imgs[index].className = 'active';
        this.className = 'active';

        // 修改大图片的地址
        big_img.src = this.src;
        $('.right img').src = this.src;
    }
}

// 放大镜
var leftBox = $('.big_img');
var mask = $('.mask');
var rightBox = $('.goods .right');
var rightImg = $('.goods .right img');

leftBox.onmouseenter = function (){
    mask.style.display = 'block';
    rightBox.style.display = 'block';
}
leftBox.onmouseleave = function (){
    mask.style.display = 'none';
    rightBox.style.display = 'none';
}

leftBox.onmousemove = function (e){
    var mask_left = e.pageX - mask.clientWidth/2 - offset(this).left;
    var mask_top = e.pageY - mask.clientHeight/2 - offset(this).top;

    // 限制mask在leftBox内部移动
    if (mask_left <= 0) {
        mask_left = 0;
    }
    if (mask_left >= this.clientWidth-mask.clientWidth) {
        mask_left = this.clientWidth-mask.clientWidth;
    }
    if (mask_top <= 0) {
        mask_top = 0;
    }
    if (mask_top >= this.clientHeight-mask.clientHeight) {
        mask_top = this.clientHeight-mask.clientHeight;
    }

    // 给mask赋值
    mask.style.left = mask_left + 'px';
    mask.style.top = mask_top + 'px';

    // mask运动量占总量的比例
    var scaleX = mask_left/(this.clientWidth-mask.clientWidth);
    var scaleY = mask_top/(this.clientHeight-mask.clientHeight);

    // 计算出右边大图移动量
    var right_left = (rightImg.clientWidth-rightBox.clientWidth) * scaleX;
    var right_top = (rightImg.clientHeight-rightBox.clientHeight) * scaleY;
    
    // mask和右边的大图运动方向相反
    rightImg.style.left = -right_left + 'px';
    rightImg.style.top = -right_top + 'px';
}
